import { province } from '@/config/reginConfig'
import { Cascader } from 'antd'
import React from 'react'
import './index.scss'
export interface RegionProps {
  placeholder?: string
  value?: string[]
  onChange?: (value: string[]) => void
  onlyRead?: boolean
}
function RegionSelect(props: RegionProps) {
  const { placeholder = '选择地区', onlyRead = false } = props

  if (onlyRead) {
    if (props.value) {
      let target = props.value
      const dfs = (text: string, arr: any, targetIndex: number): string => {
        if (!arr) {
          return text
        }
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].value === target[targetIndex]) {
            targetIndex === 0
              ? (text += arr[i].label)
              : (text += ` / ${arr[i].label}`)
            return dfs(text, arr[i].children, targetIndex + 1)
          }
        }
        return text
      }
      let text = dfs('', province || [], 0)
      return <>{text}</>
    } else {
      return <>未知地区</>
    }
  }

  return (
    <Cascader
      placeholder={placeholder}
      options={province}
      {...props}></Cascader>
  )
}

export default React.memo(RegionSelect)
